<template>
  <view class="container" style="padding: 10px; padding-bottom: 90px">
    <!--  tab 栏 -->
    <view class="wh100">
      <view
        class="data-empty-wh100"
        v-if="pageList == null || pageList.length == 0"
      >
        <u-empty :text="`${subject}为空~~`" />
      </view>
      <view v-else class="items-container" style="padding-bottom: 90px">
        <view
          @click="onItemClick(item)"
          class="items"
          :id="`menu-${item.id}`"
          v-for="item of pageList"
          :key="item.id"
        >
          <text class="item-title">{{
            item[itemName] == null ? "通用" : item[itemName]
          }}</text>
          <text
            v-on:click.stop="mealSetting($event, item.id)"
            style="color: #f3c45d"
            >餐段设置</text
          >
        </view>
        <!-- 加载更多 -->
        <li-loadmore
          :status="loadStatus"
          :loading-text="loadingText"
          :loadmore-text="loadmoreText"
          :nomore-text="nomoreText"
          @loadmore="onReachBottomEvent"
        />
      </view>
    </view>
    <u-popup :show="show" @close="close" @open="open" :closeable="true">
      <view
        style="
          width: 100vw;
          height: 90vh;
          background-color: #f8f8f8;
          padding-top: 50px;
          position: relative;
        "
      >
        <view class="spec-container">
          <view class="spec-body">
            <view>
              <view
                class="items"
                style="border-bottom: 1px solid #cacaca; padding: 8px 0"
              >
                <view class="is-default">餐段名称</view>
                <view class="spec-name">开始时间</view>
                <view class="price">结束时间</view>
                <view class="btns">是否启用</view></view
              >
            </view>
            <!-- 每一项 -->
            <view
              v-for="(item, index) in MealSettingsEdit"
              :key="item.id"
              class="items"
            >
              <view class="is-default">
                <li-input
                  v-model="item.name"
                  style="border-bottom: 1px solid #cacaca"
                ></li-input>
              </view>
              <view class="spec-name">
                <li-time-picker v-model="item.starTime"></li-time-picker>
              </view>
              <view class="price">
                <li-time-picker v-model="item.endTime"></li-time-picker>
              </view>
              <view class="btns">
                <li-switch v-model="MealSettingsEdit[index].status"></li-switch>
              </view>
            </view>
          </view>
        </view>

        <view
          style="
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            align-items: center;
            background-color: #fff;
            height: 70px;
          "
        >
          <view
            style="
              display: flex;
              flex: 1;
              margin-right: 15px;
              margin-left: 15px;
              align-items: center;
              justify-content: center;
              height: 49px;
              font-size: 18px;
              background-color: #f56c6c;
              letter-spacing: 3px;
              color: #fff;
              font-weight: bold;
              border-radius: 10px;
            "
            v-on:click="close"
            >取消</view
          >
          <view
            style="
              display: flex;
              flex: 2;
              margin-left: 15px;
              margin-right: 15px;
              align-items: center;
              justify-content: center;
              height: 49px;
              font-size: 18px;
              background-color: #f3c45d;
              letter-spacing: 3px;
              color: #fff;
              font-weight: bold;
              border-radius: 10px;
            "
            v-on:click="onConfirmMealSetting"
            >确定</view
          >
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  uShowLoading,
  uHideLoading,
  utoast,
  uNavigateBack,
  uNavigateTo,
  uSwitchTab,
  uSetNavigationBarTitle,
} from "../../../utils/uniUtils.js";
import {
  GetCoreCmsStoreList,
  GetStoreMarket,
  AddStoreMarket,
} from "../../../common/modules/m.js";
import { storeId } from "../../../constants/apiConstants";
import liListMixin from "../../../mixins/liListMixin";

export default {
  mixins: [liListMixin],
  data() {
    return {
      show: false,
      id: 0,
      MealSettingsEdit: null,
      itemName: "storeName", // pageList 每一项的标题
      subject: "门店", // 主题
      activeStyle: {
        color: "#F3C45D",
      },
      tabMenusIdx: 0, // tab的下标
      tabMenus: null, // 上tab
      leftMenus: null, // 左tab
      leftMenusIdx: null, // 左tab
      pageList: [], // 内容列表
      rootRoute: "workbench",
      routeName: "store",
      isLoaded: false, //  控制页面是否显示
      pageNum: 1,
      pageSize: 10,
      total: 0,
      showLoadMore: false,
      loadStatus: "loadmore",
      loadingText: "努力加载中。。。",
      loadmoreText: "上拉加载更多~~",
      nomoreText: "实在没有了",
    };
  },
  onReachBottom() {
    this.onReachBottomEvent();
  },
  async mounted() {
    try {
      uSetNavigationBarTitle("门店管理");
      uShowLoading();
      await this.GetPageList();
      this.isLoaded = true;
    } catch (error) {
      console.log("err", error);
      utoast("初始化失败！", "error");
      setTimeout(() => {
        uSwitchTab("/pages/tabBar/staging");
      }, 800);
    } finally {
      uHideLoading();
    }
  },
  methods: {
    /**
     * 触底事件
     */
    onReachBottomEvent() {
      this.reachBtm(this);
    },
    /**
     *  上tab栏 点击事件
     */
    async onTabClick(e) {
      this.onTabClickEvent(e, this);
    },

    /**
     * 获取列表
     */
    async GetPageList(idx = 0) {
      // console.log("GetFoodFeed");
      // console.log("this.tabMenus[idx] ", this.tabMenus[idx]);

      //  有  tabMenu时放开
      //   if (this.tabMenus[idx] != null) {
      if (this.showLoadMore) {
        this.pageNum += 1;
      }
      this.loadStatus = "loading";

      let {
        data: { list, total },
      } = await GetCoreCmsStoreList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      });

      this.pageList = [...this.pageList, ...list];
      this.total = total;
      if (this.pageList.length == this.total) {
        this.loadStatus = "nomore";
      } else {
        this.loadStatus = "loadmore";
      }
      this.showLoadMore = false;
      // console.log("tagList", list);
      //   }
    },
    /**
     * 添加按钮点击事件
     */
    async btnAddClick() {
      this.btnAddClickEvent(this);
    },

    onItemClick(item) {
      this.onItemClickEvent(item, this);
    },
    mealSetting: function (e, id) {
      e.stopPropagation();
      this.id = id;
      this.open();
    },
    close: function () {
      this.show = false;
    },
    open: async function () {
      this.show = !false;
      this.MealSettingsEdit = (
        await GetStoreMarket({
          storeId: this.id,
        })
      ).data;
    },
    onConfirmMealSetting: async function () {
      const res = await AddStoreMarket(this.MealSettingsEdit);
      if (res?.code == 0) {
        utoast("编辑成功！");
        this.close();
      } else {
        utoast("编辑失败！", "error");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/static/styles/commonStyle.scss";
.container {
  height: 100.1vh;
}

.table-header {
  display: flex;
  background-color: #f2f2f2;
}

.table-row {
  display: flex;
  border-bottom: 1px solid #ccc;
}

.table-cell {
  flex: 1;
  padding: 10rpx;
  text-align: center;
}

.spec-container {
  background-color: #fff;
  border-radius: 10px;
  margin: 10px 0;
  padding: 8px 4px;

  .spec-header {
    padding: 10px;
    border-bottom: 1px solid #ededed;
    display: flex;
    justify-content: space-between;
  }

  .spec-body {
    padding: 15px 10px;

    .items {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      border-bottom: 1px solid #cacaca;
      padding: 8px 0;
      &:last-child {
        border-bottom: none;
      }

      .is-default {
        width: 50px;
        display: flex;
        justify-content: center;
        color: #000;
        background-color: #fff;
        .is-default-active {
          color: #fff;
          background-color: #fdc31d;
        }
      }

      .spec-name {
        flex: 1;
        display: flex;
        justify-content: center;
        &.task-price {
          width: 80px;
        }
      }

      .price {
        width: 80px;
        display: flex;
        justify-content: center;
        &.task-option {
          width: 70px;
        }
      }

      .btns {
        width: 90px;
        display: flex;
        justify-content: center;
        &.task-btn {
          width: 70px;
          font-size: 12px;
        }
      }

      .btn {
        border: 1px solid #ededed;
        padding: 12rpx 12rpx;
        border-radius: 5rpx;
        &.btn-del {
          background-color: #f56c6c;
          color: #fff;
        }
      }
    }
  }
}
</style>
